<template>
  <Checkbox v-bind="getProps" v-model:checked="checkedModel" @change="handleChange">
    <slot></slot>
  </Checkbox>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { checkboxProps } from 'ant-design-vue/es/checkbox'
  import { omit } from 'lodash-es'
  import { Checkbox } from 'ant-design-vue'

  defineOptions({
    inheritAttrs: false,
  })

  const props = defineProps({
    ...checkboxProps(),
    trueValue: {
      type: [Number, Boolean, String],
      default: true,
    },
    falseValue: {
      type: [Number, Boolean, String],
      default: false,
    },
  })

  const emit = defineEmits(['update:checked', 'change'])

  const getProps = computed(() => {
    return omit(props, ['onUpdate:checked', 'onChange'])
  })

  const checkedModel = computed<boolean>({
    get() {
      return props.checked === props.trueValue
    },
    set(val) {
      emit('update:checked', val ? props.trueValue : props.falseValue)
    },
  })

  const handleChange = e => {
    const evt = {
      ...e,
      target: {
        ...e.target,
        checked: e.target.checked ? props.trueValue : props.falseValue,
      },
    }
    emit('change', evt)
  }
</script>
